<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>生命体征检测云平台</title>
		<link rel="shortcut icon" href="static/logo.ico" />
		<link rel="stylesheet" href="static/css/index.css" />
		<link rel="stylesheet" href="static/layui/css/layui.css" />
		<script type="text/javascript" src="static/js/jquery.min.js"></script>
		<script type="text/javascript" src="static/layui/layui.js"></script>
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
				margin: 0;
			}

			.container {
				height: auto;
				width: 100%;
			}

			.container2 {
				height: 100%;
				width: 100%;
				margin-top: 70px !important;
			}

			.collision-btn.disable {
				background-image: none;
				color: lightgrey;
				border-color: lightgrey;
				cursor: not-allowed;
			}

			.collision-btn.disable:hover {
				background-color: #fff;
				border-color: lightgrey;
			}

			.input-card .btn {
				margin-right: .8rem;
			}

			.amap-marker {
				opacity: 0.01;
			}

			.nav-right {
				top: 1.5rem !important;
			}

			.layui-form-item {
				margin-bottom: 0 !important;

			}

			.layui-form-label {
				width: 120px;
			}
		</style>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" href="monitoring_data.html">设备详情</a>
			<a class="layui-btn layui-btn-xs" href="BGmuban.html?id=11" style="background-color: #ff3b00 !important;"
				target="_blank">报告生成</a>
		</script>
		<script type="text/html" id="barDemo2">
		{{# if(d.isop == 1){ }} <span class="layui-badge" style="background-color: #39b54a;">在线</span> {{# } else { }}
				<span class="layui-badge">离线</span> {{# } }}
		</script>
		<script type="text/html" id="barDemo3">
			山西省太原市小店区XXXXXXXXXXXXXXXXXXXXX
		</script>
		<script type="text/html" id="barDemo4">
		{{# if(d.electricity == 4){ }}
			<img src="static/image/dianchi_4.png" style="height: 18px;width: 45px;" />
			{{# } else if(d.electricity == 3){ }}
				<img src="static/image/dianchi_3.png" style="height: 18px;width: 45px;" />
				{{# } else if(d.electricity == 2){ }}
					<img src="static/image/dianchi_2.png" style="height: 18px;width: 45px;" />
					{{# } else if(d.electricity == 1){ }}
						<img src="static/image/dianchi_1.png" style="height: 18px;width: 45px;" />
						{{# } else { }}
							<img src="static/image/dianchi_4.png" style="height: 18px;width: 45px;" />
							{{# } }}
		</script>
		<script type="text/html" id="barDemo5">
		{{d.temperature}}<span style="font-size: 14px;font-weight: 800;">℃</span>
		</script>
		<script type="text/html" id="barDemo6">
		{{d.humidity}}<span style="font-size: 14px;font-weight: 800;">%</span>
		</script>
		<script type="text/html" id="barDemo7">
		{{d.Air_pressure}}<span style="font-size: 14px;font-weight: 800;">kPa</span>
		</script>
		<script type="text/html" id="barDemoxt">
		{{# if(d.isop == 1){ }}
			69<span style="font-size: 14px;font-weight: 800;">次/分钟</span>{{# } else { }}
				0<span style="font-size: 14px;font-weight: 800;">次/分钟</span> {{# } }}
		</script>
		<script type="text/html" id="barDemohx">
		{{# if(d.isop == 1){ }}
			12<span style="font-size: 14px;font-weight: 800;">次/分钟</span>{{# } else { }}
				0<span style="font-size: 14px;font-weight: 800;">次/分钟</span> {{# } }}
		</script>
		<script type="text/html" id="barDemomb">
		{{# if(d.isop == 1){ }}
			4.8<span style="font-size: 14px;font-weight: 800;">次/分钟</span>{{# } else { }}
				0<span style="font-size: 14px;font-weight: 800;">次/分钟</span>{{# } }}
		</script>
		<script type="text/html" id="barDemo8">
		{{# if(d.isop == 1){ }} <span class="layui-badge" style="background-color: #ff2222;">离床</span>
			{{# } else { }}
				<span class="layui-badge" style="background-color:#b1adad;">未知</span> {{# } }}
		</script>
		<script>
			$(function() {
				$(".sign_out").click(function() {
					localStorage.clear();
					window.location = 'login.html'
				});
			});
			layui.use(['table', 'laydate'], function() {
				var table = layui.table;
				var laydate = layui.laydate;
				//第一个实例
				table.render({
					elem: '#demo',
					cellMinWidth: 'auto',
					height: 700,
					url: 'data/monitoringdata.json' //数据接口
						,
					page: true //开启分页
						,
					limit: 10,
					cols: [
						[ //表头        23+
							{
								field: 'id',
								title: 'ID',
								width: '6%'
							}, {
								field: 'uInfoId',
								title: '用户名',
								align: 'center',
								width: '6%'
							}, {
								field: 'name',
								title: '设备名称',
								align: 'center',
								width: '6%'
							}, {
								field: 'phone',
								title: '注册手机号',
								align: 'center',
								width: '8%'
							}, {
								field: 'deviceId',
								title: '设备地址',
								align: 'center',
								width: '10%'
							}, {
								field: 'deviceId',
								title: '定位地址',
								toolbar: '#barDemo3',
								width: '20%'
							}, {
								field: 'isop',
								title: '电池',
								toolbar: '#barDemo4',
								align: 'center',
								width: '5%'
							}, {
								field: 'deviceId',
								title: '心跳',
								align: 'center',
								toolbar: '#barDemoxt',
								width: '8%'
							}, {
								field: 'deviceId',
								title: '呼吸',
								align: 'center',
								toolbar: '#barDemohx',
								width: '8%'
							}, {
								field: 'deviceId',
								title: '脉搏',
								align: 'center',
								toolbar: '#barDemomb',
								width: '8%'
							}, {
								field: 'isop',
								title: '温度',
								toolbar: '#barDemo5',
								align: 'center',
								width: '7%'
							}, {
								field: 'isop',
								title: '湿度',
								toolbar: '#barDemo6',
								align: 'center',
								width: '8%'
							}, {
								field: 'isop',
								title: '气压',
								toolbar: '#barDemo7',
								align: 'center',
								width: '8%'
							}, {
								field: 'isop',
								title: '离床状态',
								toolbar: '#barDemo8',
								align: 'center',
								width: '9%'
							}, {
								field: 'isop',
								title: '设备状态',
								toolbar: '#barDemo2',
								align: 'center',
								width: '9%'
							}, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								align: 'center',
								width: '10%'
							}
						]
					],
					done: function(res) {
						let data = res.data;
						layui.each(data, function(i) {
							var isop = data[i].isop
							if (isop == 1) {
								var mp3 = new Audio('static/jinggao.mp3'); // 创建音频对象
								mp3.play();
								$("tr[data-index='" + i + "']").attr({
									"style": "background:#f17d7d;color:#fff;"
								}); //将当前行变成绿色
							}
						})
					}
				});
				table.render({ //其它参数在此省略
					skin: 'line' //行边框风格
						,
					even: true //开启隔行背景
						,
					size: 'sm' //小尺寸的表格
				});
				//日期范围
				laydate.render({
					elem: '#test6'
						//设置开始日期、日期日期的 input 选择器
						//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
						,
					range: ['#test-startDate-1', '#test-endDate-1']
				});
			});

			$(function() {
				$('.userinfo').hover(function() {

				});
			});
		</script>
	</head>
	<body>
		<div style="margin-top: 70px;background-color: #e5e5e5;"></div>
		<div class="container2">
			<blockquote class="layui-elem-quote" style="height: 62px;">
				<span style="font-size: 20px ;font-weight: 800;float: left;">监测</span>
				<div class="layui-form" style="float: left;margin-left: 40px;">
					<div class="layui-inline">
						<label class="layui-form-label">社区：</label>
						<div class="layui-input-inline">
							<select name="modules" lay-verify="required" lay-search="">
								<option value="">直接选择或搜索选择</option>
								<option value="1">奥林花园</option>
								<option value="2">佳地花园</option>
								<option value="3">景帝华府</option>
								<option value="4">御龙庭</option>
								<option value="5">恒大绿洲</option>
								<option value="6">恒实平阳景苑</option>
								<option value="7">长风画卷</option>
								<option value="8">银海水韵</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form" style="float: left;margin-left: 40px;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label" style="font-size: 12px; width: 100px;">日期范围:</label>
							<div class="layui-inline" id="sotime">
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
										placeholder="开始日期">
								</div>
								<div class="layui-form-mid">-</div>
								<div class="layui-input-inline">
									<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
										placeholder="结束日期">
								</div>
							</div>
						</div>
					</div>
				</div>

				<a class="layui-btn layui-btn-normal" href="#"
					style="float: left;height: 30px;line-height: 26px !important;">筛选</a>
			</blockquote>
			<div></div>
			<div class="container">
				<table id="demo" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"></table>
			</div>
			<div class="info">
				<div class="nav-left">
					<a class="login"></a>
					<a class="hometext" href="index.html" v-if="uInfoData.loginType !=1">首页</a>
					<a class="hometext" href="home.html" v-if="uInfoData.loginType == 1">首页</a>
				</div>
				<div class="nav-right">
					<ul>
						<li><a href="monitoring.html" v-if="uInfoData.loginType !=1">监测</a></li>
						<li><a href="historical_data.html" v-if="uInfoData.loginType !=1">历史数据</a></li>
						<li><a href="historical_info.html" v-if="uInfoData.loginType == 1">历史数据</a></li>
						<li><a href="call_p.html">离床报警</a></li>
						<li><a href="#">康养中心</a></li>
						<li><a href="#">中医问诊</a></li>
					</ul>
				</div>
				<div class="userinfo" id="userinfo">
					<img src="static/image/user.png" />
					<!-- <div class="red-dot"></div> -->
					<ul class="user_dropdown">
						<li class="dropdown_item user_ctrl">
							<div class="nickname">小店区（管理员）</div>
							<div class="sign_out">退出</div>
						</li>
						<li class="dropdown_item msg_item">
							<a href="user.html" target="_blank">
								<span>个人中心</span>
							</a>
						</li>
						<li class="dropdown_item msg_item">
							<a href="my_message.html" target="_blank">
								<span>我的消息</span>
								<span class="msg_unread unread_count show">5</span>
							</a>
						</li>
						<li class="dropdown_item">
							<a href="equipment.html">
								<span>设备</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
	</body>
</html>
